<template>
<div>

 <el-form :model="queryParams" :inline="true" >
   <el-form-item label="租客姓名" prop="tenantName">
     <el-input
       v-model="queryParams.tenantName"
       placeholder="请输入租客姓名"
       clearable
       size="small"
       @keyup.enter.native="handleQuery"
     />
   </el-form-item>
   <el-form-item label="房源类型">
     <el-select v-model="queryParams.signType" placeholder="请选择">
       <el-option label="整租（分散式）" value="0"></el-option>
       <el-option label="合租（分散式）" value="1"></el-option>
       <el-option label="单身公寓（集中式）" value="2"></el-option>
     </el-select>
   </el-form-item>
     <el-form-item label="小区名称">
       <el-input v-model="queryParams.premiseName" placeholder="请输入小区名称"></el-input>
     </el-form-item>
     <el-form-item label="租客电话" prop="tenantPhone">
       <el-input
         v-model="queryParams.tenantPhone"
         placeholder="请输入租客电话"
         clearable
         size="small"
         @keyup.enter.native="handleQuery"
       />
     </el-form-item>
     <el-form-item label="起始日期" prop="startDate">
       <el-date-picker
         v-model="queryParams.startDate"
         type="date"
         value-format="yyyy-MM-dd"
         placeholder="起始日期">
       </el-date-picker>
     </el-form-item>
     <el-form-item>
       <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
       <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
     </el-form-item>

 </el-form>

  <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
  <el-table   :data="tenantList">
    <el-table-column label="租客姓名" prop="tenantName" width="120" />
    <el-table-column label="租客合同编号" prop="cfContractNo" width="120" />
    <el-table-column label="电话" prop="tenantPhone" width="120" />
    <el-table-column label="房源信息" prop="roomName" width="120" />
    <el-table-column label="房源类型" width="300">
      <template slot-scope="scope">
        <div v-if="scope.row.signType==0">
          整租（分散式）
        </div>
        <div v-else-if="scope.row.signType==1">
          合租（分散式）
        </div>
        <div v-else-if="scope.row.signType==2">
          单身公寓（集中式）
        </div>
        <div v-else>
          未选择房源
        </div>
      </template>
    </el-table-column>
    <el-table-column label="起始日期" prop="startDate"  :value-format="yyyy-MM-dd" width="180"/>
    <el-table-column label="结束日期" prop="endDate"  :value-format="yyyy-MM-dd"  width="120" />
    <el-table-column label="押付方式" width="150">
      <template slot-scope="scope">
        押{{ scope.row.depositType }}付{{scope.row.paymentType}}
      </template>
    </el-table-column>
    <el-table-column label="押金" prop="deposit" width="120" />
    <el-table-column label="租金" prop="monthRent" width="120" />
    <el-table-column prop="" label="状态" width="150">
      <template slot-scope="scope">
        <div v-if="scope.row.contractState==1">
          草稿
        </div>
        <div v-else-if="scope.row.contractState==2">
          已提交
        </div>
        <div v-else-if="scope.row.contractState==3">
          已解约
        </div>
        <div v-else-if="scope.row.contractState==4">
          已结束
        </div>
        <div v-else-if="scope.row.contractState==9">
          作废
        </div>
      </template>
    </el-table-column>
    </el-table>
  <pagination
    v-show="total>0"
    :total="total"
    :page.sync="queryParams.pageNum"
    :limit.sync="queryParams.pageSize"
    @pagination="getList"
  ></pagination>

</div>
</template>

<script>
    import {listTenant} from "../../../api/hourse/tenant";

    export default {
      name: "index",
      data() {
        return {
          tenantList: [],
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            roleName: undefined,
            tenantPhone:undefined,
          },

          showSearch: true,
          total:0,
        }
      },
      created() {
        this.getList();
      },
      methods: {
        /** 查询租客列表 */
        getList() {

          listTenant(this.addDateRange(this.queryParams)).then(
            response => {
              this.tenantList = response.rows;
              this.total = response.total;
            }
          );
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
      }
    }

</script>

<style scoped>

</style>
